// 通用组件样式

// 加载组件
.loading-container {
  @include flex-center;
  min-height: 200px;
  
  .loading-spinner {
    @include loading-animation;
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-left-color: var(--primary-color);
    border-radius: 50%;
  }
  
  .loading-text {
    margin-top: var(--spacing-md);
    color: var(--text-color-secondary);
    font-size: var(--font-size-small);
  }
}

// 空状态组件
.empty-state {
  @include flex-column-center;
  padding: var(--spacing-xl);
  
  .empty-icon {
    font-size: 48px;
    color: var(--text-color-placeholder);
    margin-bottom: var(--spacing-md);
  }
  
  .empty-title {
    font-size: var(--font-size-medium);
    color: var(--text-color-secondary);
    margin-bottom: var(--spacing-sm);
  }
  
  .empty-description {
    font-size: var(--font-size-small);
    color: var(--text-color-placeholder);
    text-align: center;
    max-width: 300px;
  }
}

// 错误状态组件
.error-state {
  @include flex-column-center;
  padding: var(--spacing-xl);
  
  .error-icon {
    font-size: 48px;
    color: var(--danger-color);
    margin-bottom: var(--spacing-md);
  }
  
  .error-title {
    font-size: var(--font-size-medium);
    color: var(--danger-color);
    margin-bottom: var(--spacing-sm);
  }
  
  .error-description {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    text-align: center;
    max-width: 400px;
    margin-bottom: var(--spacing-md);
  }
  
  .error-actions {
    @include flex-center;
    gap: var(--spacing-sm);
  }
}

// 卡片组件
.card {
  @include card;
  
  &.card--hover {
    @include button-hover;
  }
  
  &.card--compact {
    padding: var(--spacing-sm);
  }
  
  &.card--spacious {
    padding: var(--spacing-lg);
  }
  
  .card__header {
    @include flex-between;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
    
    .card__title {
      font-size: var(--font-size-medium);
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0;
    }
    
    .card__actions {
      @include flex-center;
      gap: var(--spacing-xs);
    }
  }
  
  .card__body {
    flex: 1;
  }
  
  .card__footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    @include flex-between;
  }
}

// 头像组件
.avatar {
  @include avatar;
  
  &.avatar--small {
    @include avatar(32px);
  }
  
  &.avatar--large {
    @include avatar(56px);
  }
  
  &.avatar--square {
    border-radius: var(--border-radius-base);
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .avatar__placeholder {
    @include flex-center;
    width: 100%;
    height: 100%;
    background: var(--bg-color-light);
    color: var(--text-color-placeholder);
    font-weight: 600;
  }
}

// 徽章组件
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: var(--font-size-extra-small);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--border-radius-base);
  white-space: nowrap;
  
  &.badge--primary {
    background: var(--primary-color);
    color: #fff;
  }
  
  &.badge--success {
    background: var(--success-color);
    color: #fff;
  }
  
  &.badge--warning {
    background: var(--warning-color);
    color: #fff;
  }
  
  &.badge--danger {
    background: var(--danger-color);
    color: #fff;
  }
  
  &.badge--info {
    background: var(--info-color);
    color: #fff;
  }
  
  &.badge--light {
    background: var(--bg-color-light);
    color: var(--text-color-secondary);
    border: 1px solid var(--border-color);
  }
  
  &.badge--dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
  }
}

// 分割线组件
.divider {
  border: none;
  height: 1px;
  background: var(--border-color);
  margin: var(--spacing-md) 0;
  
  &.divider--vertical {
    display: inline-block;
    width: 1px;
    height: 1em;
    vertical-align: middle;
    margin: 0 var(--spacing-sm);
  }
  
  &.divider--dashed {
    background: none;
    border-top: 1px dashed var(--border-color);
  }
  
  &.divider--text {
    position: relative;
    text-align: center;
    background: none;
    
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: var(--border-color);
    }
    
    .divider__text {
      display: inline-block;
      padding: 0 var(--spacing-md);
      background: var(--bg-color);
      color: var(--text-color-secondary);
      font-size: var(--font-size-small);
      position: relative;
      z-index: 1;
    }
  }
}

// 按钮组件增强
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--border-radius-base);
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
  
  &:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  // 按钮尺寸
  &.btn--small {
    padding: calc(var(--spacing-xs) + 1px) var(--spacing-sm);
    font-size: var(--font-size-small);
  }
  
  &.btn--large {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-medium);
  }
  
  // 按钮类型
  &.btn--primary {
    background: var(--primary-color);
    color: #fff;
    
    &:hover:not(:disabled) {
      background: var(--primary-color-light);
    }
    
    &:active {
      background: var(--primary-color-dark);
    }
  }
  
  &.btn--success {
    background: var(--success-color);
    color: #fff;
    
    &:hover:not(:disabled) {
      opacity: 0.9;
    }
  }
  
  &.btn--warning {
    background: var(--warning-color);
    color: #fff;
    
    &:hover:not(:disabled) {
      opacity: 0.9;
    }
  }
  
  &.btn--danger {
    background: var(--danger-color);
    color: #fff;
    
    &:hover:not(:disabled) {
      opacity: 0.9;
    }
  }
  
  &.btn--text {
    background: transparent;
    color: var(--primary-color);
    border: none;
    
    &:hover:not(:disabled) {
      background: var(--primary-color-lighter);
    }
  }
  
  &.btn--outline {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
    
    &:hover:not(:disabled) {
      background: var(--primary-color);
      color: #fff;
    }
  }
  
  // 按钮形状
  &.btn--round {
    border-radius: 20px;
  }
  
  &.btn--circle {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    
    &.btn--small {
      width: 32px;
      height: 32px;
    }
    
    &.btn--large {
      width: 48px;
      height: 48px;
    }
  }
  
  // 加载状态
  &.btn--loading {
    cursor: wait;
    
    .btn__loading {
      @include loading-animation;
      width: 14px;
      height: 14px;
      border: 2px solid currentColor;
      border-left-color: transparent;
      border-radius: 50%;
    }
  }
}

// 提示框组件
.tooltip {
  position: relative;
  
  &::before,
  &::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: var(--transition-base);
    pointer-events: none;
    z-index: var(--z-index-tooltip);
  }
  
  &::before {
    content: attr(data-tooltip);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-base);
    font-size: var(--font-size-small);
    white-space: nowrap;
    left: 100%;
    top: 50%;
    margin-left: var(--spacing-sm);
  }
  
  &::after {
    content: '';
    border: 4px solid transparent;
    border-right-color: rgba(0, 0, 0, 0.8);
    left: 100%;
    top: 50%;
    margin-left: 2px;
  }
  
  &:hover::before,
  &:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

// 滚动条样式
.scrollbar {
  @include scrollbar;
  
  &.scrollbar--thin {
    @include scrollbar(4px);
  }
  
  &.scrollbar--thick {
    @include scrollbar(12px);
  }
}